<!-- 移除群成员 -->
<template>
  <a-modal
    :visible="props.visible"
    :width="800"
    title="移除群成员"
    @cancel="handleCancel"
    @ok="handleBeforeOk"
  >
    <div class="group-modal">
      <div class="group-modal-left">
        <!-- <BoxList :list="clientList" :field-names="fieldNames" /> -->
        <a-input
          placeholder="搜索"
          style="margin-bottom: 20px; width: 80%"
          v-model="searchVal"
          @input="search"
        >
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <a-checkbox-group v-model:model-value="checkedGroup" @change="change">
          <div>
            <div v-for="item in transformedClientList" :key="item.letter">
              <div class="">
                <div>{{ item.letter }}</div>
                <a-checkbox
                  :value="ele.userId"
                  v-for="ele in item.contacts"
                  :key="ele.id"
                  :disabled="ele.userId === currUserId"
                >
                  <template #checkbox="{ checked }">
                    <a-space
                      align="start"
                      class="custom-checkbox-card"
                      :class="{ 'custom-checkbox-card-checked': checked }"
                    >
                      <div className="custom-checkbox-card-mask">
                        <div className="custom-checkbox-card-mask-dot" />
                      </div>
                      <a-space size="small">
                        <a-avatar
                          :size="40"
                          shape="square"
                          :style="{ backgroundColor: '#00d0b6' }"
                        >
                          <img alt="avatar" :src="ele?.headPortrait" />
                        </a-avatar>
                        <span>{{ ele.name }} </span>
                      </a-space>
                    </a-space>
                  </template>
                </a-checkbox>
              </div>
            </div>
          </div>
        </a-checkbox-group>
      </div>
      <!-- 已选择列表 -->
      <div style="width: 100%">
        <div
          style="display: flex; justify-content: space-between; padding: 0 10px"
        >
          <span>移除成员</span
          ><span v-if="checkedList?.length > 0"
            >已选择{{ checkedList?.length }}个成员</span
          >
        </div>
        <a-space size="large" class="group-modal-right">
          <div v-for="item in checkedList" :key="item.id" class="item">
            <a-avatar shape="square" :style="{ backgroundColor: '#14C9C9' }">
              <img
                alt="avatar"
                src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
              />
              <template #trigger-icon>
                <IconClose @click="del(item.id)" />
              </template>
            </a-avatar>
            <div class="item-name">{{ item.name }}</div>
          </div>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import clonedeep from 'lodash.clonedeep';
import { sortContactsForGroupChat } from '@/utils/utils';
import { Message } from '@arco-design/web-vue';
import type { PointDetail } from '@/apis/approvalExecute/type';
import { GetSectionPersonnel } from '@/apis/management/human/baseSetting/leaveSetting';
import { GetOrganizationList } from '@/apis/management/organization/organizationManagement';
import { IconClose } from '@arco-design/web-vue/es/icon';
import { GetHumanRosterList } from '@/apis/management/human/humanRoster';

const props = withDefaults(
  defineProps<{
    visible?: boolean;
    teamUsers: any; // 存在的群成员
    backNodeId?: number;
  }>(),
  {}
);
const emit = defineEmits([
  'update:visible',
  'groupRemove',
  'update:backNodeId'
]);

let currUserId = +localStorage.getItem('userId') as number;

//公司同事列表
const clientList = ref([]);

let searchVal = ref(''); // 搜索框

// 搜索事件
const search = (val: string) => {
  let temp = props.teamUsers.filter((item: any) => item.name.includes(val));
  transformedClientList.value = sortContactsForGroupChat(temp);
};

let transformedClientList = ref(); // 储存经过转换的人员列表

// watch(
//   () => props.teamUsers,
//   async (newVal: boolean) => {
//     if (newVal) {
//       console.log('====================================');
//       console.log(newVal);
//       console.log('====================================');
//       transformedClientList.value = sortContactsForGroupChat(clonedeep(newVal));
//       checkedGroup.value = clientList?.value
//         .filter((item: any) => props.alreadyList?.includes(item.id))
//         .map((item: any) => item.id);
//     }
//   }
// );

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      if (props?.teamUsers) {
        transformedClientList.value = sortContactsForGroupChat(
          clonedeep(props?.teamUsers)
        );
      }
    } else {
      checkedGroup.value = [];
      checkedList.value = [];
    }
  }
);

const checkedGroup = ref<any[]>([]); // 左侧选中的值
let checkedList = ref(); // 右侧选中的值
// 选择框选中事件
const change = (ids: number[]) => {
  checkedList.value = props.teamUsers.filter((item: any) =>
    ids.includes(item.userId)
  );
};

const del = (id: number) => {
  const index = checkedList.value.findIndex((item: any) => item.id === id);
  if (index !== -1) {
    checkedList.value.splice(index, 1);
    checkedGroup.value.splice(index, 1);
  }
};

// 关闭弹窗
const close = () => {
  emit('update:visible', false);
};
const handleCancel = () => {
  close();
};
const handleBeforeOk = () => {
  if (checkedGroup.value.length < 1) {
    Message.error('请至少选择一个成员！');
    return;
  } else if (
    transformedClientList.value.length - checkedGroup.value.length <
    2
  ) {
    Message.error('一个群至少有三位成员及以上！');
    return;
  }

  emit('groupRemove', checkedGroup.value);
  emit('update:backNodeId');
  close();
};
const managementList = ref<any>();
const getManagementList = async () => {
  const res = await GetOrganizationList({});
  managementList.value = res || [];
};
onMounted(() => {
  getManagementList();
});
</script>
<style lang="less" scoped>
.group-modal {
  display: flex;
  height: 600px;

  &-left {
    width: 350px;
    border-right: 1px solid #eee;
  }
  &-right {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 20px;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      :deep(.arco-avatar-trigger-icon-button) {
        top: -10px;
        right: -10px;
      }
      &-name {
        overflow: hidden;
        text-align: center;
        width: 60px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

.custom-checkbox-card {
  padding: 10px 16px;
  /* border: 1px solid var(--color-border-2); */
  border-radius: 4px;
  width: 250px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.custom-checkbox-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-checkbox-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.custom-checkbox-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-checkbox-card:hover,
.custom-checkbox-card-checked,
.custom-checkbox-card:hover .custom-checkbox-card-mask,
.custom-checkbox-card-checked .custom-checkbox-card-mask {
  border-color: #07c160;
}

.custom-checkbox-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-checkbox-card:hover .custom-checkbox-card-title,
.custom-checkbox-card-checked .custom-checkbox-card-title {
  color: rgb(var(--primary-6));
}

.custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
  background-color: #07c160;
}
</style>
